/**
 * 用于填写K-V类型信息的弹窗
 * 可以管理一个页面中的多个弹窗
 */

/**
 * 创建一个弹窗
 * @param {*} title                     弹窗标题
 * @param {*} pop_up_window_id          弹窗所属div标签的id
 * @param {*} okay_call_back_func_name  回调函数名称，字符串类型
 * 注意：回调函数的参数为：pop_up_window_id，表示点击确认的弹窗
 */
function KVPopUpWindow (father_id, pop_up_window_id='', title,  okay_call_back_func_name) {
    this.appendix_data = {};
    this.my_id = pop_up_window_id;

    // 创建背景元素并设置样式
    this.background_div = document.createElement('div');
    this.background_div.id = pop_up_window_id;
    this.background_div.style.display = "none";
    this.background_div.style.position = "fixed";
    this.background_div.style.left = "0";
    this.background_div.style.top = "0";
    this.background_div.style.width = "100%";
    this.background_div.style.height = "100%";
    this.background_div.style.backgroundColor = "rgba(0,0,0,0.5)";

    // 创建弹窗本体元素并设置样式
    this.pop_up_window = document.createElement('div');
    this.pop_up_window.style.zIndex = "1";
    this.pop_up_window.style.width = "380px";
    this.pop_up_window.style.margin = "12% auto";
    this.pop_up_window.style.overflow = "auto";
    this.pop_up_window.style.padding = "0px 30px 16px 30px";
    this.pop_up_window.style.background = "#fff";

    // 添加弹窗标题和关闭按钮
    this.pop_up_window_header = document.createElement('div');
    this.pop_up_window_header.innerHTML = '<span style="cursor:pointer; float:right;" onclick="closeKVPopUpWindow(\'' + pop_up_window_id + '\');">X</span><h3>' + title + '</h3>';
    
    // 创建弹窗中待用户输入的键值对元素
    this.kvItems = document.createElement('div');

    // 添加弹窗中的确认和取消按钮
    button_line = document.createElement('div');
    button_line.innerHTML = '<button style="float:right; margin:6px;" ' 
        // + 'onclick="onKVPopUpWindowOkayButtonClicked(\'' 
        // + okay_call_back_func_name + '\',\'' + pop_up_window_id + '\');">Okay</button>'
        + 'onclick="' + okay_call_back_func_name + '(\'' + pop_up_window_id + '\');">Okay</button>'
        + '<button style="float:right; margin:6px;" onclick="closeKVPopUpWindow(\'' + pop_up_window_id + '\');">Cancel</button>';

    // 组合各个元素
    this.pop_up_window.appendChild(this.pop_up_window_header);
    this.pop_up_window.appendChild(this.kvItems);
    this.pop_up_window.appendChild(button_line);
    this.background_div.appendChild(this.pop_up_window);
    document.getElementById(father_id).appendChild(this.background_div);

    /**
     * 给弹窗添加一个文本框的HTML代码，无返回值
     * key_name: 返回结果中key的名称
     * show_name: 弹窗中提示用户输入的key的名称
     * value: key的默认值
     */
    this.addTextarea = function(show_name, key_name, value='') {
        one_kv_item = document.createElement('div');
        one_kv_item.style.height = "32px";
        one_kv_item.style.width = "360px";
        // value输入框需要加入"kvpopupvalue"这个class，用于提交时获取用户输入
        // 并设置自定义属性data-keynameme
        one_kv_item.innerHTML = '<p style="float:left; height:25px; width:140px; margin:auto;">' 
            + show_name + '</p><textarea class="kvpopupvalue" data-keynameme="' + key_name 
            + '" style="float:left; height:25px; width:140px; margin:auto;">' + value + '</textarea>';
        this.kvItems.appendChild(one_kv_item);
    }

    /**
     * 给弹窗添加一个空的选项栏的HTML代码，无返回值
     * @param id            <select>标签的id，用于修改选项内容
     * @param key_name      返回结果中key的名称
     * @param show_name     弹窗中提示用户输入的key的名称
     */
    this.addEmptyComboBox = function(id, key_name, show_name) {
        one_kv_item = document.createElement('div');
        one_kv_item.style.height = "32px";
        one_kv_item.style.width = "360px";
        // value输入框需要加入"kvpopupvalue"这个class，用于提交时获取用户输入
        // 并设置自定义属性data-keynameme
        one_kv_item.innerHTML = '<p style="float:left; height:25px; width:140px; margin:auto;">' 
            + show_name + '</p><select id="' + id + '" class="kvpopupvalue" data-keynameme="' + key_name
            + '" style="float:left; height:25px; width:140px; margin:auto;"></select>';
        this.kvItems.appendChild(one_kv_item);
    }

    /**
     * 设置弹窗中的ComboBox的选项
     * @param id            combobox的<select>标签的id
     * @param select_items  选项列表，格式为[{name, value} ...]
     */
    this.setComboBoxItems = function(id, items) {
        select = document.getElementById(id);
        select.innerHTML = '';
        items.forEach(function(ele) {
            option = document.createElement('option');
            option.innerHTML = ele.name;
            option.value = ele.value;
            select.appendChild(option);
        });
    }

    
    /**
     * 获取弹窗中用户编辑的数据
     * AppendixData也会一起返回
     * 返回一个字典
     * @param {*} get_appendix 是否获取附加数据，默认获取
     */
    this.getAllItems = function(get_appendix=true) {
        value_list = document.getElementById(this.my_id).getElementsByClassName('kvpopupvalue');
        // 获取弹窗中用户的输入
        key_value = {};
        for(i = 0; i < value_list.length; i++) {
            a = value_list.item(i);
            key_nameme = a.getAttribute('data-keynameme');
            value = value_list.item(i).value;
            key_value[key_nameme] = value;
        }
        if(get_appendix == true) {
            Object.assign(key_value, this.appendix_data);
        }
        return key_value;
    }

    
    /**
     * 清空所有KV项的值，没有返回值
     * @param {*} clear_appendix 是否清理附加数据，默认清理
     */
    this.clearAllItems = function(clear_appendix=true) {
        if(clear_appendix == true) {
            this.appendix_data = {};
        }
        value_list = document.getElementById(pop_up_window_id).getElementsByClassName('kvpopupvalue');
        for(i = 0; i < value_list.length; i++) {
            value_list.item(i).value = '';
        }
    }
    
    /**
     * 去掉所有KV项相关的HTML代码，没有返回值
     * @param {*} clear_appendix 是否清理附加数据，默认清理
     */
    this.deleteAllItems = function(clear_appendix=true) {
        if(clear_appendix == true) {
            this.appendix_data = {};
        }
        this.kvItems.innerHTML = '';
    }

    this.setAppendixData = function(key, value) {
        this.appendix_data[key] = value;
    }
}

/**
 * 弹窗管理器
 * 用于实现一个页面内包含多个弹窗
 */
function KVPopUpWindowManager(pop_up_windows_root_id) {
    this.pop_up_windows_root = pop_up_windows_root_id;
    this.pop_up_window_id_obj = {}; // 弹窗ID与弹窗实例的映射关系

    /**
     * 创建一个弹窗实例
     */
    this.createPopUpWindow = function(pop_up_window_id='', title='', commit_call_back_func_name='') {
        one_window = new KVPopUpWindow(this.pop_up_windows_root, pop_up_window_id, title, commit_call_back_func_name);
        this.pop_up_window_id_obj[pop_up_window_id] = one_window;
        return one_window;
    }

    this.show = function(pop_up_window_id) {
        document.getElementById(pop_up_window_id).style.display = "block";
    }

    this.close = function(pop_up_window_id) {
        document.getElementById(pop_up_window_id).style.display = "none";
    }

    // 删除一个弹窗
    this.delete = function(pop_up_window_id) {

    }

    this.getPopUpWindowObject = function(pop_up_window_id) {
        return this.pop_up_window_id_obj[pop_up_window_id];
    }
}

function closeKVPopUpWindow(pop_up_window_id) {
    document.getElementById(pop_up_window_id).style.display = "none";
}

/**
 * 点击弹窗的确认按钮后的回调函数，没有返回值
 * @param {*} okay_call_back_func_name 用户指定的回调函数的名称，字符串类型
 */
function onKVPopUpWindowOkayButtonClicked(okay_call_back_func_name, pop_up_window_id) {
    // 获取弹窗中用户的输入
    key_value = {};
    for(i = 0; i < value_list.length; i++) {
        a = value_list.item(i);
        key_nameme = a.getAttribute('data-keynameme');
        value = value_list.item(i).value;
        key_value[key_nameme] = value;
    }
    // 传给用户设定的回调函数
    window[okay_call_back_func_name](key_value);
    // 清空弹窗中的内容
    value_list = document.getElementById(pop_up_window_id).getElementsByClassName('kvpopupvalue');
    for(i = 0; i < value_list.length; i++) {
        value_list.item(i).value = '';
    }
}
